<template>
  <div class="crud-data-table-demo">
    <h2>CrudDataTable 演示</h2>

    <div class="demo-section">
      <h3>基础表格</h3>
      <CrudDataTable :data="tableData" :columns="basicColumns" border stripe style="width: 100%" />
    </div>

    <div class="demo-section">
      <h3>完整功能表格</h3>
      <CrudDataTable :data="tableData" :columns="fullColumns" border stripe height="400"
        @selection-change="handleSelectionChange" @action-click="handleActionClick" style="width: 100%" />
    </div>

    <div class="demo-section">
      <h3>树形表格</h3>
      <CrudDataTable :data="treeData" :columns="treeColumns" row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all border stripe
        style="width: 100%" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CrudDataTable from './index.vue'
import type { ColumnConfig, TableRowData } from './types'

/**
 * 表格数据
 */
const tableData = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'active',
    createTime: '2023-01-01 10:00:00',
    age: 25
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'inactive',
    createTime: '2023-01-02 11:00:00',
    age: 30
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com',
    avatar: '',
    status: 'pending',
    createTime: '2023-01-03 12:00:00',
    age: 28
  }
])

/**
 * 树形数据
 */
const treeData = ref([
  {
    id: 1,
    name: '一级 1',
    email: 'level1-1@example.com',
    status: 'active',
    createTime: '2023-01-01 10:00:00',
    age: 25,
    children: [
      {
        id: 11,
        name: '二级 1-1',
        email: 'level2-1@example.com',
        status: 'inactive',
        createTime: '2023-01-02 10:00:00',
        age: 20
      },
      {
        id: 12,
        name: '二级 1-2',
        email: 'level2-2@example.com',
        status: 'pending',
        createTime: '2023-01-03 10:00:00',
        age: 22,
        children: [
          {
            id: 121,
            name: '三级 1-2-1',
            email: 'level3-1@example.com',
            status: 'active',
            createTime: '2023-01-04 10:00:00',
            age: 18
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '一级 2',
    email: 'level1-2@example.com',
    status: 'inactive',
    createTime: '2023-02-01 10:00:00',
    age: 30
  }
])

/**
 * 基础列配置
 */
const basicColumns: ColumnConfig[] = [
  {
    type: 'index',
    label: '序号',
    width: 60
  },
  {
    prop: 'name',
    label: '姓名',
    width: 120
  },
  {
    prop: 'email',
    label: '邮箱',
    minWidth: 200
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80,
    align: 'center'
  }
]

/**
 * 完整功能列配置
 */
const fullColumns: ColumnConfig[] = [
  {
    type: 'selection',
    width: 55,
    fixed: 'left'
  },
  {
    type: 'index',
    label: '序号',
    width: 60,
    fixed: 'left'
  },
  {
    type: 'image',
    prop: 'avatar',
    label: '头像',
    width: 80,
    imageConfig: {
      width: 50,
      height: 50,
      round: true,
      preview: true,
      showPlaceholderText: true
    }
  },
  {
    prop: 'name',
    label: '姓名',
    width: 120,
    sortable: true
  },
  {
    prop: 'email',
    label: '邮箱',
    minWidth: 200,
    showOverflowTooltip: true
  },
  {
    type: 'tag',
    prop: 'status',
    label: '状态',
    width: 100,
    tagConfig: {
      typeMap: {
        active: 'success',
        inactive: 'danger',
        pending: 'warning'
      },
      textMap: {
        active: '活跃',
        inactive: '禁用',
        pending: '待审核'
      }
    }
  },
  {
    type: 'date',
    prop: 'createTime',
    label: '创建时间',
    width: 180,
    sortable: true,
    dateConfig: {
      format: 'YYYY-MM-DD HH:mm:ss'
    }
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80,
    align: 'center',
    sortable: true
  },
  {
    type: 'actions',
    label: '操作',
    width: 200,
    fixed: 'right',
    actions: [
      {
        label: '编辑',
        text: '编辑',
        type: 'primary',
        size: 'small',
        handler: (row: TableRowData, index: number) => {
          console.log('编辑', row, index)
        }
      },
      {
        label: '删除',
        text: '删除',
        type: 'danger',
        size: 'small',
        handler: (row: TableRowData, index: number) => {
          console.log('删除', row, index)
        }
      },
      {
        label: '详情',
        text: '详情',
        type: 'info',
        size: 'small',
        link: true,
        handler: (row: TableRowData, index: number) => {
          console.log('详情', row, index)
        }
      }
    ]
  }
]

/**
 * 树形列配置（与基础列一致，这里演示常规列也可用于树形）
 */
const treeColumns: ColumnConfig[] = [
  { type: 'index', label: '序号', width: 60 },
  { prop: 'name', label: '名称', minWidth: 160 },
  { prop: 'email', label: '邮箱', minWidth: 200, showOverflowTooltip: true },
  { prop: 'status', label: '状态', width: 100 },
  { prop: 'createTime', label: '创建时间', width: 180 },
  { prop: 'age', label: '年龄', width: 80, align: 'center' }
]

/**
 * 处理选择变化
 * @param selection - 选中的行
 */
const handleSelectionChange = (selection: TableRowData[]) => {
  console.log('选择变化:', selection)
}

/**
 * 处理操作按钮点击
 * @param action - 操作配置
 * @param row - 行数据
 * @param index - 行索引
 */
const handleActionClick = (action: unknown, row: TableRowData, index: number) => {
  console.log('操作点击:', action, row, index)
}
</script>

<style lang="scss" scoped>
.crud-data-table-demo {
  padding: 20px;

  .demo-section {
    margin-bottom: 40px;

    h3 {
      margin-bottom: 16px;
      color: #303133;
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>
